<!doctype html>
<head>
    <title>SymboLayer3D example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <script src="config.js"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
    if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
    
    mapboxgl.accessToken = config.accessToken;
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-122.4131, 37.7743],
      zoom: 15.95,
      pitch: 60,
      heading: 41,
      hash: true,
      maxZoom: 24
    });

    map.on("load", function() {
        // Initialize threebox
        map.addLayer({
            id: 'custom_layer',
            type: 'custom',
            onAdd: function(map, gl){
                
                window.threebox = new Threebox(map, gl);
                threebox.setupDefaultLights();

                var source = {
                    type: "FeatureCollection",
                    features: [
                    {
                        type: "Feature",
                        properties: { model: "orientation_0_0" },
                        geometry: {
                            type: "Point",
                            coordinates: [0,0]
                        }
                    },
                    {
                        type: "Feature",
                        properties: { model: "orientation_-30_-30" },
                        geometry: {
                            type: "Point",
                            coordinates: [-30,-30]
                        }
                    },
                    {
                        type: "Feature",
                        properties: { model: "orientation_-30_0" },
                        geometry: {
                            type: "Point",
                            coordinates: [-30,0]
                        }
                    },
                    {
                        type: "Feature",
                        properties: { model: "orientation_0_30" },
                        geometry: {
                            type: "Point",
                            coordinates: [0,30]
                        }
                    },
                    {
                        type: "Feature",
                        properties: { model: "orientation_30_30" },
                        geometry: {
                            type: "Point",
                            coordinates: [30,30]
                        }
                    },
                    
                    ]
                };

                var symbols = threebox.addSymbolLayer({
                    id:             "scale",
                    source:         source, // You can also specify a URL or relative path such as "data/points.geojson",
                    modelName:      {property: 'model'},    // will look for an .obj and .mtl file with this name
                    modelDirectory: "models/",          // in this directory
                    rotation:       { generator: feature => (new THREE.Euler(0,0,0, "ZXY")) },
                    scale:          [100000,100000,100000],
                    scaleWithMapProjection: true
                });

                console.log(symbols);

            },
            render: function(gl, matrix){
                threebox.update();
            }
        });

    });

    </script>
</body>